onbeforesort Event

This event is executed before the rows are sorted in a grid. For this event to execute, you must set thesortableproperty to true.

Syntax

Inline HTML	<div cordysType="wcp.library.ui.XGrid" id="xgridId" onbeforesort="handler()"> ... </div>
Event property	xgridId.onbeforesort = handler

Event Information

To invoke	When you sort rows by clicking the header cell of a column, using the header context menu, or calling thecolumn.sort()method.
Default Action	Initiates any action associated with this event.

Event Object Properties

Although event handlers in the DHTML Object Model do not receive parameters directly, a handler can query an event object for data.

Property	Description
data	XML data node, which is the basis for the content of XGrid.
columnId	Read-only. Refers to the identifier of the column, for which the event is executed.
returnValue	Boolean. If set to False, the standard sort is cancelled. Allows for implementation of own sort algorithm.
showSortImage	Boolean. If set to False, the sort order image is not displayed in the header.
sortOrder	Read-only. String that refers to the ascending or descending sort order.

Remarks

This event allows you to implement your own sort algorithm (returnValue=false).
Note: In case of frozen rows, the rowData nodes of the frozen rows must be positioned before the non-frozen rowData nodes.

Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html onapplicationready="fillXGrid()">
   <head>
   <meta content="Web Generator" name="Generator"/>
   <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
   <title>onbeforesort onaftersort event</title>
<script src="/cordys/wcp/application.js"></script>
  <script type="cordys/xml" id="fieldsXML">
     	<data>
      </data>
  </script>
  <script type="cordys/xml" id="newNode"> 
      <fields>
         <field1>
         </field1>
         <field2>
         </field2>
      </fields>
  </script>
<script>
var XMLNode;
  /*creates sample data to fill XGrid*/
   function fillXGrid()
       {
         var numberOfRows = parseInt(document.getElementById("noRows").value);
         XMLNode =cordys.cloneXMLDocument(fieldsXML.XMLDocument);
         var dataNode = cordys.selectXMLNode(XMLNode,".//*[local-name()='data']");
         for (var i=0 ; i<(numberOfRows) ; i++ )
           {
            	var newRow = cordys.cloneXMLDocument(newNode.XMLDocument);
            	cordys.setTextContent(cordys.selectXMLNode(newRow,".//*[local-name()='field1']"), "field1_" + i)
                cordys.setTextContent(cordys.selectXMLNode(newRow,".//*[local-name()='field2']"),i);
                cordys.appendXMLNode(newRow.documentElement,dataNode)
           }
         myGrid.bindData( XMLNode );
       }
  function handleOnbeforesort()
       { 
         var evnt = window.application.event;
         var data = evnt.data;
         //use own sort method
         evnt.returnValue = false;
         //suppress sort image in header
         evnt.showSortImage = false;
         //switch first two rowData nodes
         var parent = data. documentElement;
         var rowData1 = cordys.selectXMLNodes(parent,".//*[local-name()='fields']")[0];
         var rowData2 =cordys.selectXMLNodes(parent,".//*[local-name()='fields']")[1];
         parent.insertBefore( rowData2, rowData1 );
       }
  function handleOnaftersort()
       {
         var evnt = window.application.event;
         var str =   "Switched first two rows! Sorted on " + evnt.columnId + ", sort order " + evnt.sortOrder;
application.notify( str );
       }
</script>
</head>
<body>
   noRows<input value="10" id="noRows"  style="width:50px">
   <button onclick="fillXGrid()">fill XGrid</button>
   <br /><br />
   <div cordysType="wcp.library.ui.XGrid"
         		id="myGrid" 
         		xpathRowData = "data/fields"
         		xpathBusinessObject = "."
         		onbeforesort="handleOnbeforesort()"
         		onaftersort="handleOnaftersort()"
         		style="width:400;height:200">
      <div id="field1" ref="field1">field1</div>
      <div id="field2" ref="field2" dataType="integer">field2</div>	
   </div>
</body>
</html>